$(function () {
  // 音频
  $("audio").audioPlayer();

  //黑胶唱片
  // $.colorizer("div.colorizer", {
  //   file: "",
  //   shadow: ".colorizer",
  //   echolizer: ".echolizer",
  // });

  $(".qdao li").on({
    mouseover: function () {
      $(this).children("a").css("color", "red");
    },
    mouseout: function () {
      $(this).children("a").css("color", "#000");
    },
  });

  // 主界面左侧点击添加样式
  $(".main .left ul li").on({
    click: function () {
      $(this)
        .addClass("main-left-licur")
        .siblings()
        .removeClass("main-left-licur");
    },
  });

  // 精品歌单页经过变色
  $(".gd-cur").on({
    mouseenter: function () {
      $(".gd-tit, .hg").css("color", "red");
    },
    mouseleave: function () {
      $(".gd-tit, .hg").css("color", "#000");
    },
  });

  // 点击左侧导航栏右边显示相应界面   公共样式
  $(
    ".click-one, .click-two, .click-three, .click-four, .click-five, .click-six, .click-seven"
  ).on({
    click: function () {
      $(".main .left ul li").addClass("mainleftcur");
      $(".left").addClass("mainleftcurs");
      $(".main").addClass("maincur");
      $(".main .right").addClass("mainrightcur");
      $("body").addClass("body-cur");
      $(".navbar").addClass("navbar-default");
      $(".fontcolor").addClass("fontcolors");
      $(".fontcolor").addClass("zcyy");
      $(".sous").on({
        mouseenter: function () {
          $(this).addClass("sous-tj");
          $(this).removeClass("sous-qd");
        },
        mouseleave: function () {
          $(this).addClass("sous-qd");
          $(this).removeClass("sous-tj");
        },
      });
    },
  });

  // 点击主界面精选歌单显示歌单页面
  $(".click-one").on({
    click: function () {
      $(".right-box .right").eq(1).show().siblings().hide();
    },
  });
  // 点击主界面每日推送显示每日推送页面
  $(".click-two").on({
    click: function () {
      $(".right-box .right").eq(2).show().siblings().hide();
    },
  });
  // 点击主界面热门歌单显示热门歌单页面
  $(".click-three").on({
    click: function () {
      $(".right-box .right").eq(3).show().siblings().hide();
    },
  });
  // 点击主界面人气歌手显示人气歌手页面
  $(".click-four").on({
    click: function () {
      $(".right-box .right").eq(4).show().siblings().hide();
    },
  });
  // 点击主界面轻音乐显示轻音乐页面
  $(".click-five").on({
    click: function () {
      $(".right-box .right").eq(5).show().siblings().hide();
    },
  });
  // 点击主界面直播显示直播页面
  $(".click-six").on({
    click: function () {
      $(".right-box .right").eq(6).show().siblings().hide();
    },
  });
  // 点击主界面我的音乐显示我的音乐界面
  $(".click-seven, .plun-top-mrig").on({
    click: function () {
      $(".right-box .right").eq(7).show().siblings().hide();
    },
  });

  $(".mymusic-main-gqu").on({
    click: function () {
      $(".right-box .right").eq(8).show().siblings().hide();
    },
  });
  // 点击主界面网抑郁返回主界面 / 还原样式
  $(".wyyu-b").on({
    click: function () {
      $(".right-box .right").eq(0).show().siblings().hide();
      $(".main .left ul li").removeClass("mainleftcur");
      $(".left").removeClass("mainleftcurs");
      $(".main").removeClass("maincur");
      $(".main .right").removeClass("mainrightcur");
      $("body").removeClass("body-cur");
      $(".navbar").removeClass("navbar-default");
      $(".fontcolor").removeClass("fontcolors");
      $(".fontcolor").removeClass("zcyy");
      $(".main .left ul li").removeClass("main-left-licur");

      $(".sous").on({
        mouseenter: function () {
          $(this).removeClass("sous-tj");
          $(this).removeClass("sous-qd");
        },
        mouseleave: function () {
          $(this).removeClass("sous-qd");
          $(this).removeClass("sous-tj");
        },
      });
    },
  });

  $(".imgsz").on({
    mouseenter: function () {
      $(this).siblings("p").css("color", "#fff");
      $(this).css({
        // border: "2px solid rgb(248, 7, 7)",
        boxShadow: "3px 3px 12px rgb(248, 7, 7)",
      });
      $(this).children(".imgsz-smk, .imgsz-tu").show();
      $(this)
        .children(".imgsz-smk")
        .children(".imgsz-smk-p")
        .children("p")
        .slideDown(200);
      // $(".imgsz-smk-p p").css("transition", ".3s");
    },
    mouseleave: function () {
      $(this).siblings("p").css("color", "rgb(53, 19, 19)");
      $(this).css({
        boxShadow: "2px 2px 10px rgb(100, 41, 41)",
      });
      $(this).children(".imgsz-smk, .imgsz-tu").hide();
      $(this)
        .children(".imgsz-smk")
        .children(".imgsz-smk-p")
        .children("p")
        .slideUp(200);
    },
  });

  // 歌曲评论
  // var text = $(".plun-textarea textarea").text();
  // alert(text);

  $(".pl").on({
    click: function () {
      if ($(".plun-textarea textarea").val() != "") {
        var text = $(".plun-textarea textarea").val();
        // var li = $("<li>" + text + "</li>");
        // $(".plun-main ul").append(li);
        // $(".plun-textarea textarea").val("");
        $(".plun-main ul li:last").clone(true).appendTo(".plun-main ul");
        $(".plun-main ul li p:last").text(text);
        $(".plun-textarea textarea").val("");
      } else {
        alert("内容不能为空");
      }
    },
  });
  // 评论点赞
  var addflag = 1;
  var jianflag = 1;
  $(".add").on({
    click: function () {
      if (addflag == 1) {
        $(this).css({
          color: "red",
        });
        $(".zan").children("em").text("123");
        addflag++;
      } else {
        $(this).css({
          color: "#000",
        });
        $(".zan").children("em").text("122");
        addflag--;
      }
    },
  });
  $(".jian").on({
    click: function () {
      if (jianflag == 1) {
        $(this).css({
          color: "red",
        });
        $(".cai").children("em").text("234");
        jianflag++;
      } else {
        $(this).css({
          color: "#000",
        });
        $(".cai").children("em").text("233");
        jianflag--;
      }
    },
  });

  // 人气歌手vue router

  // const User = {
  //   template: `
  //   <div>

  //   </div>
  //   `,
  // };
  // const Register = {
  //   template: "<h1> Register 组件</h1>",
  // };

  // // 创建路由实例对象
  // const router = new VueRouter({
  //   // 路由规则
  //   routes: [
  //     { path: "/", redirect: "/User" },
  //     { path: "/user", component: User },
  //     { path: "/register", component: Register },
  //   ],
  // });
  // const vm = new Vue({
  //   el: "#app",
  //   data: {},
  //   // router: router
  //   router,
  // });
});
